import React from 'react';
import { Row, Col, Card, Button, Menu, Dropdown, Tooltip } from 'antd';
import BreadcrumbCustom from '../BreadcrumbCustom';
import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';

class Buttons extends React.Component {
  state = {
    loadings: [],
  };

  enterLoading = (index: any) => {
    this.setState(({ loadings }: any) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }: any) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <div className="py-3">
        <BreadcrumbCustom first="UI" second="按钮" />
        <Row gutter={10} className="mt-3">
          <Col md={12}>
            <Card title="按钮类型" bordered={false}>
              <Button type="primary">Primary Button</Button>
              <Button type="default" className="ml-2">
                Default Button
              </Button>
              <Button type="dashed" className="ml-2">
                Dashed Button
              </Button>
              <Button type="text" className="ml-2">
                Text Button
              </Button>
              <Button type="link" className="ml-2">
                Link Button
              </Button>
            </Card>
          </Col>
          <Col md={12}>
            <Card title="图标按钮" bordered={false}>
              <Tooltip title="搜索">
                <Button
                  type="primary"
                  shape="circle"
                  icon={<SearchOutlined />}
                />
              </Tooltip>
              <Button type="primary" className="ml-2" shape="circle">
                A
              </Button>
              <Button type="primary" className="ml-2" icon={<SearchOutlined />}>
                Search
              </Button>
              <Tooltip title="搜索" className="ml-2">
                <Button
                  shape="circle"
                  className="ml-2"
                  icon={<SearchOutlined />}
                />
              </Tooltip>
              <Button className="ml-2" icon={<SearchOutlined />}>
                Search
              </Button>
              <Tooltip title="search" className="ml-2">
                <Button
                  type="dashed"
                  shape="circle"
                  icon={<SearchOutlined />}
                />
              </Tooltip>
              <Button type="dashed" className="ml-2" icon={<SearchOutlined />}>
                Search
              </Button>
            </Card>
          </Col>
          <Col md={12} className="mt-2">
            <Card title="按钮大小" bordered={false}>
              <Button type="primary" size="large">
                large
              </Button>
              <Button className="ml-2" type="primary">
                Default
              </Button>
              <Button className="ml-2" type="primary" size="small">
                Small
              </Button>
            </Card>
          </Col>
          <Col md={12} className="mt-2">
            <Card title="按钮状态" bordered={false}>
              <Button type="primary">Primary</Button>
              <Button className="ml-2" type="primary" disabled>
                Primary(disabled)
              </Button>
              <br />
              <br />
              <Button>Default</Button>
              <Button className="ml-2" disabled>
                Default(disabled)
              </Button>
              <br />
              <br />
              <Button danger>Danger Default</Button>
              <Button className="ml-2" danger disabled>
                Danger Default(disabled)
              </Button>
            </Card>
          </Col>
          <Col md={12} className="mt-2">
            <Card title="加载状态按钮" bordered={false}>
              <Button
                type="primary"
                loading={loadings[0]}
                onClick={() => this.enterLoading(0)}
              >
                Click me!
              </Button>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Buttons;
